<script setup>
import CollectionDialog from './CollectionDialog.vue'
import { ref, defineProps, watch, defineEmits, handleError } from "vue"
let tableData = ref([{
    info: "/src/assets/images/book.png", "number": "《活着》",
    "price": "￥25.00", "type": "1", "section": "￥25.00", "status": "待发货",
    "time": "2023-11-11 12:00:00", "id": "1"
},])
let dialogVisible = ref(true)
const props = defineProps({
    isDialog: Boolean
})
const emit = defineEmits(['closeDialog'])
watch(() => props.isDialog, (newVal, oldVal) => {
    console.log('newVal ==>', newVal)
    dialogVisible.value = newVal
})

function close() {
    dialogVisible.value = false
    emit('closeDialog', false)

}
</script>

<template>
    <div class="tableDialog">
        <el-dialog title="" v-model="dialogVisible" width="900" @close="close">
            <div class="dialog-content">
                <div class="line-1">
                    <el-button class="button"><img class="img" src="@/assets/images/shelves/add.png" alt="">
                        <div>授权店铺
                        </div>
                    </el-button>
                    <el-input v-model="value" placeholder="搜索店铺名称/商家账号"
                        style="width: 280px;margin-right:16px;height: 32px;background: #F7F8FA;">
                        <template #prefix>
                            <img src="@/assets/images/shelves/search.png" alt=""
                                style="color: #A8ABB2;width: 14px;height: 14px;margin-right:12px ;">
                        </template>
                    </el-input>
                    <el-select  v-model="value" placeholder="授权状态" size="default"
                        style="width: 120px;height: 32px;background: #F7F8FA;margin-right: 16px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"  /></el-select>
                    <el-date-picker v-model="date" style="width: 286;" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" prefix-icon="Calendar">
                    </el-date-picker>
                </div>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 16px;">
                <el-table-column prop="info" label="站点" width="180">
                    <template #default="{ row }">
                        {{row.info}}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="商家账号" width="193" />
                <el-table-column prop="time" label="店铺名称" width="191" />
                <el-table-column prop="price" label="授权时间" width="191">
            
                </el-table-column>
                <el-table-column prop="type" label="最后采集时间" width="191">
                    <template #default="{ row }">
                        <div style="color: #E6A23C; background-color: #FDF6EC;width: 56.02px;display: flex;
                        justify-content: center;">{{ row.type }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="section" label="授权状态" width="120">
                    <template #default="{ row }">
                        <div style="color: #67C23A;background: #F0F9EB;;width: 68.02px;;display: flex;
                        justify-content: center;">{{ row.section }}</div>
                    </template>

                </el-table-column>
                <el-table-column prop="todo" label="操作" width="191">
                    <template #default="{ row }">
                        <span @click="handleEdit()" class="operate"><img src="@/assets/images/shelves/translate.png" alt="">采集商品 </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="bottom">
                 <span>共 28 条数据 </span>
            </div>
            
                <el-pagination class="currentPage" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next" :total="400"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div>
    </div>
           
        </el-dialog>
    </div>
    <CollectionDialog :isDialog="isTabDialog"></CollectionDialog>
</template>

<style lang="scss" scoped>
.tableDialog {

    .dialog-content {
        padding: 24px;
        height: 339px;
        .operate{
            color: #409EFF;
            display:flex;
            align-items: center;
            cursor: pointer;
            img{
                margin-left: 16px;
                height: 14px;
                width: 14px;
                margin-right: 4px;
            }
        }

        .line-1 {
            display: flex;
            align-items: center;

            .button {
                width: 110px;
                height: 32px;
                background-color: #409EFF;
                display: flex;
                align-items: center;
                margin-right: 16px;
            }

            .img {
                width: 14px;
                height: 14px;
                margin-right: 8px;
            }

            div {
                height: 14px;
                color: white;
            }

        }
    }
    .bottom{
        
        width: 100%;
        display: flex;
        height: 32px;
        align-items: center;

    }
}
</style>
<style lang="scss">
.tableDialog {
    .el-dialog__headerbtn {
        display: none;
    }

    .dialog-content {
        .line-1 {

            .el-date-editor--daterange {
                width: 256px;
                height: 32px;
                box-sizing: border-box;
              
            }

            .el-range__icon {
                float: right;
            }

            .el-range-input {
                width: 80px;
            }

            .el-date-editor {
                padding-left: 0;
            }

            .el-date-editor .el-range__close-icon--hidden {
                visibility: visible;
                opacity: 1;
            }

            .el-input__icon {
                width: 0;
                height: 0;
            }

            .el-range-separator {
                width: 10px;
                flex: 0;
                margin-left: 41px;

            }

            .el-date-editor .el-range__close-icon--hidden {
                visibility: visible;
                opacity: 1;
            }

            .el-range__close-icon {
                background: url('@/assets/images/ordermangent/date.png') no-repeat center;
                background-size: contain;
                width: 20px;
                /* 根据你的图标大小调整宽度 */
                height: 20px;
                /* 根据你的图标大小调整高度 */
            }

            .el-range__close-icon svg {
                visibility: hidden;
            }
        }
    }
}
</style>